<template>
<div class="page">
    <form>
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <label>名称
                        <input type="text" placeholder="店名" v-model="name"/>
                    </label>
                    <span class="validation" v-show="!validations.name.isValid">{{validations.name.text}}</span>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <label>网址
                        <input type="text" placeholder="网址" v-model="website"/>
                    </label>
                    <span class="validation" v-show="!validations.website.isValid">{{validations.website.text}}</span>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <label>简介
                        <input type="text" placeholder="简介" v-model="description"/>
                    </label>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <label>图片
                        <input type="file" id="cafe-photo" ref="photo" v-on:change="uploadPhoto"/>
                    </label>
                </div>
            </div>
            <div class="grid-x grid-padding-x" v-for="(location,key) in locations">
                <div class="large-12 medium-12 small-12 cell">
                    <h3>位置</h3>
                </div>
                <div class="large-6 medium-6 small-12 cell">
                    <label>位置名称
                        <input type="text" placeholder="位置名称" v-model="locations[key].name">
                    </label>
                </div>
                <div class="large-6 medium-6 small-12 cell">
                    <label>详细地址
                        <input type="text" placeholder="详细地址" v-model="locations[key].address">
                    </label>
                    <span class="validation" v-show="!validations.locations[key].address.isValid">{{ validations.locations[key].address.text }}</span>
                </div>
                <div class="large-6 medium-6 small-12 cell">
                    <label>城市
                        <input type="text" placeholder="城市" v-model="locations[key].city">
                    </label>
                    <span class="validation" v-show="!validations.locations[key].city.isValid">{{ validations.locations[key].city.text }}</span>
                </div>
                <div class="large-6 medium-6 small-12 cell">
                    <label>省份
                        <input type="text" placeholder="省份" v-model="locations[key].state">
                    </label>
                    <span class="validation" v-show="!validations.locations[key].state.isValid">{{ validations.locations[key].state.text }}</span>
                </div>
                <div class="large-6 medium-6 small-12 cell">
                    <label>邮编
                        <input type="text" placeholder="邮编" v-model="locations[key].zip">
                    </label>
                    <span class="validation" v-show="!validations.locations[key].zip.isValid">{{ validations.locations[key].zip.text }}</span>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <label>支持的冲泡方法</label>
                    <span class="brew-method" v-for="brewMethod in brewMethods">
                        <input type="checkbox"
                               v-bind:id="'brew-method-'+brewMethod.id+'-'+key"
                               v-bind:value="brewMethod.id"
                               v-model="locations[key].methodsAvailable"/>
                        <label v-bind:for="'brew-method-'+brewMethod.id+'-'+key">{{ brewMethod.method }}</label>
                    </span>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <tag-input v-bind:unique="key"></tag-input>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <a class="button" v-on:click="removeLocation(key)">移除位置</a>
                </div>
            </div>
            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <a class="button" v-on:click="addLocation()">新增位置</a>
                </div>
                <div class="large-12 medium-12 small-12 cell">
                    <a class="button" v-on:click="createCafe()">提交表单</a>
                </div>
            </div>
        </div>
    </form>
</div>
</template>

<script>
    import { EventBus } from "../event-bus";
    import TagInput from "../components/global/forms/TagInput";

    export default {
        name: "NewCafe",
        data(){
            return{
                name:'',
                locations:[],
                website:'',
                description:'',
                roaster:false,
                photos:'',
                validations:{
                    name:{
                        isValid:true,
                        text:'',
                    },
                    locations:[],
                    oneLocation:{
                        isValid:true,
                        text:'',
                    },
                    website:{
                        isValid:true,
                        text:'',
                    }
                },
            }
        },
        mounted(){
            EventBus.$on('tags-edited',function (tagsAdded) {
                this.locations[tagsAdded.unique].tags = tagsAdded.tags;
            }.bind(this))
        },
        components:{
            TagInput,
        },
        methods:{
            //添加cafe
            createCafe:function () {
                if(this.validateCafe()){
                    this.$store.dispatch('createCafe',{
                        name:this.name,
                        website:this.website,
                        description:this.description,
                        roaster:this.roaster,
                        locations:this.locations,
                        photos:this.photos,
                    })
                }
            },
            //添加地址
            addLocation:function(){
                this.locations.push({
                    name:'',
                    address:'',
                    city:'',
                    state:'',
                    zip:'',
                    methodsAvailable:[],
                    tags:'',
                });
                this.validations.locations.push({
                    address:{
                        isValid:true,
                        text:'',
                    },
                    city:{
                        isValid:true,
                        text:'',
                    },
                    state:{
                        isValid:true,
                        text:'',
                    },
                    zip:{
                        isValid:true,
                        text:'',
                    },
                })
            },
            //移除地址
            removeLocation:function(key){
                this.locations.splice(key,1);
                this.validations.locations.splice(key,1);
            },
            //数据验证
            validateCafe:function () {
                let validated = true;
                for(var index in this.locations){
                    if(this.locations.hasOwnProperty(index)){
                        //地址
                        if(this.locations[index].address.trim()===''){
                            validated = false;
                            this.validations.locations[index].address.text = '请输入地址';
                            this.validations.locations[index].address.isValid = false;
                        }else {
                            this.validations.locations[index].address.text = '';
                            this.validations.locations[index].address.isValid = true;
                        }
                        //城市
                        if(this.locations[index].city.trim()===''){
                            validated = false;
                            this.validations.locations[index].city.text = '请输入城市';
                            this.validations.locations[index].city.isValid = false;
                        }else {
                            this.validations.locations[index].city.text = '';
                            this.validations.locations[index].city.isValid = true;
                        }
                        //省份
                        if(this.locations[index].state.trim()===''){
                            validated = false;
                            this.validations.locations[index].state.text = '请输入身份';
                            this.validations.locations[index].state.isValid = false;
                        }else {
                            this.validations.locations[index].state.text = '';
                            this.validations.locations[index].state.isValid = true;
                        }
                        //邮编
                        if(this.locations[index].zip.trim()===''||!this.locations[index].zip.match(/(^\d{6}$)/)){
                            validated = false;
                            this.validations.locations[index].zip.text = '请输入正确邮编';
                            this.validations.locations[index].zip.isValid = false;
                        }else {
                            this.validations.locations[index].zip.text = '';
                            this.validations.locations[index].zip.isValid = true;
                        }
                    }
                }

                if(this.name.trim()===''){
                    validated = false;
                    this.validations.name.isValid=false;
                    this.validations.name.text='请输入店名';
                }else {
                    this.validations.name.isValid=true;
                    this.validations.name.text='';
                }
                if (this.website.trim !== '' && !this.website.match(/^((https?):\/\/)?([w|W]{3}\.)+[a-zA-Z0-9\-\.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/)) {
                    validated = false;
                    this.validations.website.isValid = false;
                    this.validations.website.text = '请输入有效的网址 URL';
                } else {
                    this.validations.website.isValid = true;
                    this.validations.website.text = '';
                }
                return validated;
            },
            //清除表单
            clearForm:function () {
                this.name = '';
                this.website = '';
                this.description = '';
                this.roaster = false;
                this.locations = [];
                this.picture = '';
                this.$refs.photo.value = '';
                this.validations = {
                    name: {
                        isValid: true,
                        text: ''
                    },
                    locations: [],
                    oneLocation: {
                        isValid: true,
                        text: ''
                    },
                    website: {
                        isValid: true,
                        text: ''
                    }
                };
                this.addLocation();
                EventBus.$emit('clear-tags');
            },
            //图片上传
            uploadPhoto(){
                this.photos = this.$refs.photo.files[0];
                console.log(this.photos);
            }
        },
        created() {
            this.addLocation();
        },
        computed:{
            brewMethods(){
                return this.$store.getters.getBrewMethods;
            },
            cafeCreateStatus(){
                return this.$store.getters.getCafeCreateStatus;
            }
        },
        watch:{
            cafeCreateStatus:function () {
                if(this.cafeCreateStatus == 2){
                    this.clearForm();
                    $('#cafe-added-successfully').show().delay(3000).fadeOut();
                }
                if(this.cafeCreateStatus == 3){
                    $('#cafe-added-unsuccessfully').show().delay(3000).fadeOut();
                }
            }
        }
    }
</script>

<style scoped>
    div.page{
        margin-top: 25px;
        min-height: calc(100vh - 152px);
    }
    span.validation{
        color: red;
        display: block;
    }
</style>
